<template>
	<div class="home">
		<div id="header">
			<div class="centerTitle">
				<div class="headerLeft">logo</div>
				<div class="headerRight">
					<div class="userBox">
						<span class="userIcon">icon</span><i class="userName">{{userInfo.name}}</i>
					</div>
				</div>
			</div>
		</div>
		<div id="content">
			<ul class="nav">
				<li>首页</li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'home',
	data () {
		return {
			userInfo:{
				name: 'mouse',
			}
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#header{
		width: 100%;
		height: 50px;
		border-bottom: 2px solid #ccc;
		color: #fff;
		background: skyblue;
	}
	.centerTitle{
		box-sizing:border-box; 
		width: 100%;
		height: 50px;
		padding: 0 120px;
		position: relative;
	}
	.headerLeft, .headerRight{
		width: 120px;
		height: 50px;
		position: absolute;
		top: 0;
	}
	.headerLeft{
		left: 0;
		color: #fff;
		font-size: 40px;
		line-height: 50px;
		text-align: center;
	}
	.headerRight{
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}
	.headerRight>.userBox>span{
		display: inline-block;
		width: 30px;
		height: 30px;
		margin-right: 5px;
		border-radius: 50%;
		background-color: #ccc;
	}
	.headerRight>.userBox>span,.headerRight>.userBox>i{
		vertical-align: middle;
	}
	fl{
		float: left;
	}
	fr{
		float: right;
	}
</style>
